<template>
  <div>
    <div class="qw-videolist-box">
      <video-player
        class="vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="item.playerOptions"
      ></video-player>
      <div class="demo-upload-list-cover">
        <Icon
          type="ios-trash-outline"
          @click.native="handleRemove(item)"
        ></Icon>
      </div>
    </div>
    <Upload
      ref="upload"
      :on-success="handleSuccess"
      :format="['mp4']"
      :max-size="2048"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      multiple
      type="drag"
      action="//jsonplaceholder.typicode.com/posts/"
      style="display: inline-block; width: 58px"
    >
      <div style="width: 58px; height: 58px; line-height: 58px">
        <Icon type="ios-camera" size="20"></Icon>
      </div>
    </Upload>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {};
  },
  mounted () {},
  created () {},
  methods: {
    // 上传成功
    handleSuccess (res) {},
    // 文件格式失败
    handleFormatError () {},
    // 超出大小
    handleMaxSize () {},
    handleBeforeUpload () {}
  }
};
</script>

<style lang="less" scoped>
.qw-videolist-box {
  width: 100%;
  height: 100%;

  .demo-upload-list-cover {
    height: 30px;
    line-height: 30px;
    background: #2d8cf0;
    z-index: 1;
    bottom: auto;
    right: auto;
    border-bottom-right-radius: 10px;
  }

  & /deep/ .video-player {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;

    & .video-js {
      height: 100%;

      .vjs-icon-placeholder {
        width: 100%;
        height: 100%;
        display: block;
      }

      .vjs-volume-panel,
      .vjs-current-time,
      .vjs-progress-control {
        display: none;
      }
    }

    & .vjs-fullscreen {
      .vjs-volume-panel,
      .vjs-current-time,
      .vjs-progress-control {
        display: flex;
      }
    }
  }

  & /deep/ .vjs-custom-skin > .video-js .vjs-big-play-button {
    width: 30px !important;
    height: 30px !important;
    font-size: 20px;
    line-height: 30px !important;
    margin-top: -12px !important;
    margin-left: -16px;
  }
}
</style>
